search: Refactor providerIcon into providerInfo

In order to match the current mockups, the providerIcon
class needed to include both the name of the provider
and the label that informs the user about how many more
search results are available for that specific provider.
The latter replaces the plus sign icon that has been
used so far.

https://bugzilla.gnome.org/show_bug.cgi?id=749957

diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 76aeaa5799b3d2eee1db6fa37bbd23758d07cc69..25769a47786ba37b1e221a19ccbb762953d30aa6 100644 (file)
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -18,7 +18,6 @@
     <file>gnome-shell.css</file>
     <file>gnome-shell-high-contrast.css</file>
     <file>logged-in-indicator.svg</file>
-    <file>more-results.svg</file>
     <file>no-events.svg</file>
     <file>no-notifications.svg</file>
     <file>noise-texture.png</file>

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index d639e309405169cf610e974438f50f1b2420d873..fc16943c521213d57d301eec119af570e5f50e36 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1189,14 +1189,17 @@ StScrollBar {
 .list-search-result-description {
   color: #cacac4; }
 
+.list-search-provider-details {
+  width: 150px;
+  color: #e2e2df;
+  margin-top: 0.24em; }
+
+.list-search-provider-content {
+  spacing: 20px; }
+
 .search-provider-icon {
   padding: 15px; }
 
-.search-provider-icon-more {
-  width: 16px;
-  height: 16px;
-  background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); }
-
 /* DASHBOARD */
 #dash {
   font-size: 9pt;

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 6a5935538568835462fa853f746620967d047bcf..07f43e04251e0daedf2828a5b15c007e8e57fb05 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 6a5935538568835462fa853f746620967d047bcf
+Subproject commit 07f43e04251e0daedf2828a5b15c007e8e57fb05

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 6d5559a2d30cdf5db644525ff04033f16435f9ef..e1132c79e042a8ac709f86096f247e108ca94c5b 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1189,14 +1189,17 @@ StScrollBar {
 .list-search-result-description {
   color: #cacac4; }
 
+.list-search-provider-details {
+  width: 150px;
+  color: #e2e2df;
+  margin-top: 0.24em; }
+
+.list-search-provider-content {
+  spacing: 20px; }
+
 .search-provider-icon {
   padding: 15px; }
 
-.search-provider-icon-more {
-  width: 16px;
-  height: 16px;
-  background-image: url("resource:///org/gnome/shell/theme/more-results.svg"); }
-
 /* DASHBOARD */
 #dash {
   font-size: 9pt;

diff --git a/data/theme/more-results.svg b/data/theme/more-results.svg
deleted file mode 100644 (file)
index d2fe5f2..0000000
--- a/data/theme/more-results.svg
+++ /dev/null
@@ -1,114 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="16"
-   height="16"
-   id="svg12430"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="more-results.svg">
-  <defs
-     id="defs12432" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#7a7a7a"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="90.509668"
-     inkscape:cx="6.5009792"
-     inkscape:cy="8.3589595"
-     inkscape:document-units="px"
-     inkscape:current-layer="g14642-3-0"
-     showgrid="false"
-     borderlayer="true"
-     inkscape:showpageshadow="false"
-     inkscape:window-width="1440"
-     inkscape:window-height="840"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1">
-    <inkscape:grid
-       type="xygrid"
-       id="grid13002" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata12435">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1036.3622)">
-    <g
-       style="display:inline"
-       transform="translate(-141.99984,638.37113)"
-       inkscape:label="zoom-in"
-       id="g14642-3-0">
-      <path
-         sodipodi:type="inkscape:offset"
-         inkscape:radius="0"
-         inkscape:original="M 145.1875 400 C 144.5248 400 144 400.54899 144 401.21875 L 144 410.78125 C 144 411.45101 144.5248 412 145.1875 412 L 154.8125 412 C 155.4752 412 156 411.45101 156 410.78125 L 156 401.21875 C 156 400.54899 155.4752 400 154.8125 400 L 145.1875 400 z M 149 403 L 151 403 L 151 405 L 153 405 L 153 407 L 151 407 L 151 409 L 149 409 L 149 407 L 147 407 L 147 405 L 149 405 L 149 403 z "
-         xlink:href="#rect11749-5-0-1-8"
-         style="color:#bebebe;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;opacity:0.8"
-         id="path13004"
-         inkscape:href="#rect11749-5-0-1-8"
-         d="M 145.1875,400 C 144.5248,400 144,400.54899 144,401.21875 l 0,9.5625 c 0,0.66976 0.5248,1.21875 1.1875,1.21875 l 9.625,0 c 0.6627,0 1.1875,-0.54899 1.1875,-1.21875 l 0,-9.5625 C 156,400.54899 155.4752,400 154.8125,400 L 145.1875,400 z m 3.8125,3 2,0 0,2 2,0 0,2 -2,0 0,2 -2,0 0,-2 -2,0 0,-2 2,0 L 149,403 Z"
-         transform="translate(0,1)" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#path13004"
-         id="use11960"
-         transform="translate(1,-1)"
-         width="16"
-         height="16" />
-      <use
-         x="0"
-         y="0"
-         xlink:href="#use11960"
-         id="use11962"
-         transform="translate(-2,0)"
-         width="16"
-         height="16" />
-      <path
-         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
-         d="M 7 5 L 7 7 L 5 7 L 5 9 L 7 9 L 7 11 L 9 11 L 9 9 L 11 9 L 11 7 L 9 7 L 9 5 L 7 5 z "
-         transform="translate(141.99984,397.99107)"
-         id="rect3757" />
-      <path
-         inkscape:connector-curvature="0"
-         style="color:#bebebe;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible"
-         d="M 145.1875,400 C 144.5248,400 144,400.54899 144,401.21875 l 0,9.5625 c 0,0.66976 0.5248,1.21875 1.1875,1.21875 l 9.625,0 c 0.6627,0 1.1875,-0.54899 1.1875,-1.21875 l 0,-9.5625 C 156,400.54899 155.4752,400 154.8125,400 L 145.1875,400 z m 3.8125,3 2,0 0,2 2,0 0,2 -2,0 0,2 -2,0 0,-2 -2,0 0,-2 2,0 L 149,403 Z"
-         id="rect11749-5-0-1-8" />
-      <rect
-         style="fill:none;stroke:none"
-         id="rect3620-5-4"
-         width="15.981825"
-         height="16"
-         x="142"
-         y="398"
-         rx="0"
-         ry="0" />
-    </g>
-  </g>
-</svg>

diff --git a/js/ui/search.js b/js/ui/search.js
index 0dd4870ff2a1b9f4d1b75f0bfadbfd8ce710b41b..4f9729ea8c6cae4727744bb45c174a92dfbb1d23 100644 (file)
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -102,6 +102,7 @@ const ListSearchResult = new Lang.Class({
                               y_fill: false,
                               x_align: St.Align.START,
                               y_align: St.Align.MIDDLE });
+
         this.actor.label_actor = title;
 
         if (this.metaInfo['description']) {
@@ -189,7 +190,7 @@ const SearchResultsBase = new Lang.Class({
         Main.overview.toggle();
     },
 
-    _setMoreIconVisible: function(visible) {
+    _setMoreCount: function(count) {
     },
 
     _ensureResultActors: function(results, callback) {
@@ -240,7 +241,7 @@ const SearchResultsBase = new Lang.Class({
         } else {
             let maxResults = this._getMaxDisplayedResults();
             let results = this.provider.filterResults(providerResults, maxResults);
-            let hasMoreResults = results.length < providerResults.length;
+            let moreCount = Math.max(providerResults.length - results.length, 0);
 
             this._ensureResultActors(results, Lang.bind(this, function(successful) {
                 if (!successful) {
@@ -257,7 +258,7 @@ const SearchResultsBase = new Lang.Class({
                 results.forEach(Lang.bind(this, function(resultId) {
                     this._addItem(this._resultDisplays[resultId]);
                 }));
-                this._setMoreIconVisible(hasMoreResults && this.provider.canLaunchSearch);
+                this._setMoreCount(this.provider.canLaunchSearch ? moreCount : 0);
                 this.actor.show();
                 callback();
             }));
@@ -273,16 +274,16 @@ const ListSearchResults = new Lang.Class({
         this.parent(provider);
 
         this._container = new St.BoxLayout({ style_class: 'search-section-content' });
-        this.providerIcon = new ProviderIcon(provider);
-        this.providerIcon.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
-        this.providerIcon.connect('clicked', Lang.bind(this,
+        this.providerInfo = new ProviderInfo(provider);
+        this.providerInfo.connect('key-focus-in', Lang.bind(this, this._keyFocusIn));
+        this.providerInfo.connect('clicked', Lang.bind(this,
             function() {
-                this.providerIcon.animateLaunch();
+                this.providerInfo.animateLaunch();
                 provider.launchSearch(this._terms);
                 Main.overview.toggle();
             }));
 
-        this._container.add(this.providerIcon, { x_fill: false,
+        this._container.add(this.providerInfo, { x_fill: false,
                                                  y_fill: false,
                                                  x_align: St.Align.START,
                                                  y_align: St.Align.START });
@@ -294,8 +295,8 @@ const ListSearchResults = new Lang.Class({
         this._resultDisplayBin.set_child(this._container);
     },
 
-    _setMoreIconVisible: function(visible) {
-        this.providerIcon.moreIcon.visible = visible;
+    _setMoreCount: function(count) {
+        this.providerInfo.setMoreCount(count);
     },
 
     _getMaxDisplayedResults: function() {
@@ -679,8 +680,8 @@ const SearchResults = new Lang.Class({
     }
 });
 
-const ProviderIcon = new Lang.Class({
-    Name: 'ProviderIcon',
+const ProviderInfo = new Lang.Class({
+    Name: 'ProviderInfo',
     Extends: St.Button,
 
     PROVIDER_ICON_SIZE: 48,
@@ -693,22 +694,28 @@ const ProviderIcon = new Lang.Class({
                       accessible_name: provider.appInfo.get_name(),
                       track_hover: true });
 
-        this._content = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._content = new St.BoxLayout({ vertical: false,
+                                           style_class: 'list-search-provider-content' });
         this.set_child(this._content);
 
-        let rtl = (this.get_text_direction() == Clutter.TextDirection.RTL);
-
-        this.moreIcon = new St.Widget({ style_class: 'search-provider-icon-more',
-                                        visible: false,
-                                        x_align: rtl ? Clutter.ActorAlign.START : Clutter.ActorAlign.END,
-                                        y_align: Clutter.ActorAlign.END,
-                                        x_expand: true,
-                                        y_expand: true });
-
         let icon = new St.Icon({ icon_size: this.PROVIDER_ICON_SIZE,
                                  gicon: provider.appInfo.get_icon() });
+
+        let detailsBox = new St.BoxLayout({ style_class: 'list-search-provider-details',
+                                            vertical: true,
+                                            x_expand: true });
+
+        let nameLabel = new St.Label({ text: provider.appInfo.get_name(),
+                                       x_align: Clutter.ActorAlign.START });
+
+        this._moreLabel = new St.Label({ x_align: Clutter.ActorAlign.START });
+
+        detailsBox.add_actor(nameLabel);
+        detailsBox.add_actor(this._moreLabel);
+
+
         this._content.add_actor(icon);
-        this._content.add_actor(this.moreIcon);
+        this._content.add_actor(detailsBox);
     },
 
     animateLaunch: function() {
@@ -716,5 +723,10 @@ const ProviderIcon = new Lang.Class({
         let app = appSys.lookup_app(this.provider.appInfo.get_id());
         if (app.state == Shell.AppState.STOPPED)
             IconGrid.zoomOutActor(this._content);
+    },
+
+    setMoreCount: function(count) {
+        this._moreLabel.text = _("%d more").format(count);
+        this._moreLabel.visible = count > 0;
     }
 });